// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { Action } from '@knno/ui/action';
import { Dialog } from '@knno/ui/dialog';
import { Progress } from '@knno/ui/progress';
import { Waiting } from '@knno/ui/waiting';
import { bar } from './index.css';
import { Button } from '@knno/ui/jsx/button';
import { Toast } from '../../../dist/components/toast/toast';

export function ShowDialog() {
	return (
		<>
			<h2>对话框</h2>
			<div class={bar}>
				<Button
					text="等待"
					onclick={() => {
						Waiting.show();
						setTimeout(() => {
							Waiting.close();
						}, 2000);
					}}
				/>
				<Button
					text="进度条"
					onclick={() => {
						let value = 0;
						Progress.show();
						function updateValue() {
							let message = null;
							if (value === 30) {
								message = '正在加载，请稍后...';
							} else if (value === 70) {
								message = null;
							} else {
								message = undefined;
							}
							Progress.update(value, message);
							if (value < 100) {
								value++;
								setTimeout(updateValue, 50);
							} else {
								setTimeout(() => {
									Progress.close();
								}, 1000);
							}
						}
						updateValue();
					}}
				/>
				<Button
					text="消息框"
					onclick={() => {
						Dialog.alert('这是一个普通消息！');
					}}
				/>
				<Button
					text="提示框"
					onclick={() => {
						Dialog.tips('这是一个提示消息！', '提示');
					}}
				/>
				<Button
					text="警告框"
					onclick={() => {
						Dialog.warning('这是一个警告消息！', '警告');
					}}
				/>
				<Button
					text="错误框"
					onclick={() => {
						Dialog.error('这是一个错误消息！', '错误');
					}}
				/>
				<Button
					text="成功框"
					onclick={() => {
						Dialog.success('这是一个成功消息！', '成功');
					}}
				/>
				<Button
					text="不带标题只有图标"
					onclick={() => {
						Dialog.error('这是一个错误消息！');
					}}
				/>
				<Button
					text="询问框"
					onclick={() => {
						Dialog.confirm('是否确认？', '确认').then((value) => Dialog.alert('选择结果：' + value));
					}}
				/>
				<Button
					text="输入框"
					onclick={() => {
						Dialog.prompt({ message: '请输入日期：', placeholder: 'YYYY-MM', verify: /^\d{4}-\d{2}$/ }).then((value) =>
							Dialog.alert(value + '')
						);
					}}
				/>
				<Button
					text="自定义对话框"
					onclick={() => {
						Dialog.create(...ShowDialog())
							.autoClose(true)
							.show();
					}}
				/>
				<Button
					text="连开多个"
					onclick={() => {
						Dialog.create(...ShowDialog())
							.autoClose(true)
							.show();
						setTimeout(() => Dialog.success('成功消息！'));
						setTimeout(
							() =>
								Dialog.create(...ShowDialog())
									.autoClose(true)
									.show(),
							100
						);
						setTimeout(() => Dialog.error('错误消息', '错误'), 200);
					}}
				/>
				<Button
					text="ActionSheet"
					onclick={() => {
						Action.show(ShowDialog());
					}}
				/>
				<Button
					text="Action-Top"
					onclick={() => {
						Action.show(<div style={{ height: '20em', alignItems: 'center', justifyContent: 'center' }}>文字</div>, {
							align: 'top',
						});
					}}
				/>
				<Button
					text="Action-Left"
					onclick={() => {
						Action.show(<div style={{ width: '20em', alignItems: 'center', justifyContent: 'center' }}>文字</div>, {
							align: 'left',
						});
					}}
				/>
				<Button
					text="Action-Right"
					onclick={() => {
						Action.show(<div style={{ width: '20em', alignItems: 'center', justifyContent: 'center' }}>文字</div>, {
							align: 'right',
						});
					}}
				/>
				<Button
					text="ActionSheet（带标题）"
					onclick={() => {
						Action.show(ShowDialog()).title('这是一个标题');
					}}
				/>
				<Button
					text="ActionSheet（标题和按钮）"
					onclick={() => {
						Action.show(ShowDialog())
							.onOK(() => {
								Toast.show('ok clicked');
							})
							.title('这是一个标题');
					}}
				/>
				<Button
					text="上部Action不入队列"
					onclick={() => {
						Action.show(ShowDialog(), { autoClose: false, align: 'top' });
					}}
				/>
			</div>
		</>
	);
}
